<template>
    <main-wrap :loading="true" ref="mianEle" 
    :load="onLoad" 
    :end="page.finished" :noFixed="true" 
    bodyBg="none" 
      :showOverTxt="page.lists.length>0" 
      :pageIndex="page.pageIndex">
        <template v-slot:header>
            <div class="adheader">
                <div class="hcon">
                    <div class="topSearch">
                        <div class="tswd">
                            <my-search :placeholder="search" v-model="keyword"  @onSearch="getSearchData"/>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="goodsMainCon">
             <div class="goodsTabSearchBox">
                <sort :lists="goodsCategorys" @change="getSortData"/>
            </div>
            <div class="list-coupons">
                <div class="item" :class="{'gq':sortParams.orderField==3}" @click="btnUrl(item)" v-for="(item,index) in page.lists" :key="index">
                    <div class="left">
                        <div class="icon"></div>
                         <div class="number">{{item.couponAmount?.decimalTwoString}}</div>
                    </div>
                    <div class="right">
                        <div class="title">{{item.shopName}}</div>
                        <div class="money">{{text1}} ${{item.minAmount?.decimalTwoString}}</div>
                        <div class="date">{{text2}}{{item.validDate}}</div>
                    </div>
                </div>
            </div>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import sort from '@/components/sort.vue';
import twoTab from '@/components/twoTab.vue'
import empty from '@/components/empty.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        sort,
        twoTab,
        empty
    },
    setup(){
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const router = useRouter()
        const {t} = useI18n()

        const state = reactive({
              userInfo:computed(()=>store.state.base.userInfo),
            keyword:'',
            goodsCategoryId:'',
            goodsCategorys:[
                {id:1,name:t('coupons.tab1'),noShow:true},
                {id:2,name:t('coupons.tab2'),noShow:true},
                {id:3,name:t('coupons.tab3'),noShow:true}
            ],
            sortParams:{
                orderField: 1,
                orderType: "desc",
            },
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            },
            total:0,
            totalText:t('public.total'),
            search:t('public.search'),
            text1:t('coupons.text1'),
            text2:t('coupons.text2'),
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    console.log(state.sortParams)
                    const res = await store.dispatch("shop/get_coupon_list", {
                        page: state.page.pageIndex,
                        "totalAmount": {
                            "num": 0,
                            "tinyNum": 0
                        },
                        limit: state.page.pageSize,
                        ...state.sortParams,
                        userStatus:state.sortParams.orderField,
                        walletAddress:state.userInfo.walletAddress
                        //shopId:state.id
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

     
        
        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getSearchData = async(keyword)=>{
            resetScroll()
        } 
        const getSortData = sortParams =>{
            state.sortParams = sortParams
            resetScroll()
        }

     const btnUrl =(item)=>{
              router.push({path:'/couponsDetail',query:{name:JSON.stringify(item)}})
        } 

        return {
            ...toRefs(state),
            onLoad,
            getSearchData,
            getSortData,
            btnUrl
        }
    }
}
</script>

<style lang="scss" scoped>
    .adheader{
         padding: 15px 30px 15px 0;
        .hcon{
            display: flex;
            height: 80px;
            line-height: 80px;
            align-items: center;
            .shopLetfTop{
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                b{
                    color: #82FEF4;
                }
            }
            .topSearch{
                flex: 1;
                // display: flex;
                // justify-content: end;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .goodsMainCon{
        padding: 10px 0 0 0;
    }
    .goodsTabSearchBox{
        display: inline-block;
        height: 55px;
        background: url(/images/gloabAdSplace/tsc.png) left top no-repeat;
        background-size: 100% 100%;
        padding: 0 30px;
    }
    .ctgbox{
        // display: inline-block;
        // width: auto;
        padding: 0 0 20px 0;
    }
    .list-coupons{
        display: flex;
        justify-content: flex-start;
        flex-flow: wrap;
        margin-top:20px;
        .item{
            background-image: url('/images/coupons.png');
            width:600px;
            height:160px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-right:20px;
            margin-bottom:20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-self: center;
            .left{
                 width:160px;
                 text-align: center;
                 border-right:1px dashed #ffffff60;
                 height:160px;
                  align-items: center;
                 align-self: center;
                .icon{
                    background-image: url('/images/c-s.png');
                    width:36px;
                    height:56px;
                    margin:30px auto 10px auto;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .number{
                    color: #67F8FF;
                    font-size:28px;
                }
            }
            .right{
                padding:0 20px;
                .title{
                    color: #67F8FF;
                    font-size:32px;
                }
                .money{
                    color: #fff;
                    font-size:30px;
                }
                .date{
                    color: #ffffff60;
                    font-size:24px;
                }
            }
        }.gq{
            
            background-image: url('/images/coupons-gq.png');
            .left{
                 border-right:1px dashed #ffffff60;
                .icon{
                    background-image: url('/images/c-s-gq.png');
                }
                .number{
                    color: #ffffff60;
                    font-size:28px;
                }
            }
            .right{
                padding:0 20px;
                .title{
                    color: #fff;
                    font-size:32px;
                }
                .money{
                    color: #fff;
                    font-size:30px;
                }
                .date{
                    color: #ffffff60;
                    font-size:24px;
                }
            }
        }
    }

</style>